<template>
	<view class="content">
		<view class="status_bar">
			<!-- 这里是状态栏 -->
		</view>
		<view style="width: 100%;display: flex;justify-content: space-between;align-items: center;padding: 0 36rpx 0 16rpx;box-sizing: border-box;">
			<view style="display: flex;justify-content: flex-start;align-items: center;">
				<view style="box-sizing: border-box;" @click="goBack">
					<view style="border: 2rpx solid #E5E6E8;border-radius: 24rpx;">
						<image style="width: 36rpx;height: 36rpx;margin: 16rpx 16rpx 4rpx;" src="/static/images/icon/left-icon.png"></image>
					</view>
				</view>
				<view style="margin-left: 32rpx;">
					<u-input
						placeholder="輕斷食8小時菜單"
						prefixIcon="search"
						prefixIconStyle="font-size: 40rpx;color: #909399"
						shape="circle"
						style="background-color: #fff;padding: 6rpx 18rpx;"
						v-model="keyword"
					></u-input>
				</view>
			</view>
			<view style="color: #232426;font-size: 32rpx;font-weight:400;" @click="search">
				搜尋
			</view>
		</view>
		<view v-if="showRes" style="display: flex;justify-content: space-between;align-items: center;width: 100%;box-sizing: border-box;padding: 0 32rpx;margin-top: 24rpx;">
			<view style="letter-spacing: 8rpx;">共{{num}}筆</view>
			<view style="display: flex;justify-content: flex-end;align-items: center;">
				<view @click="showArea=true" style="display: flex;justify-content: flex-end;align-items: center;border: 2rpx solid #E5E6E8;padding: 12rpx 24rpx;border-radius: 16rpx;margin-left: 16rpx;">
					<view>地區</view>
					<view>
						<u-image
							src="/static/images/icon/down-icon.png"
							width="28rpx"
							height="28rpx"
						></u-image>
					</view>
				</view>
				<view @click="showSex=true" style="display: flex;justify-content: flex-end;align-items: center;border: 2rpx solid #E5E6E8;padding: 12rpx 24rpx;border-radius: 16rpx;margin-left: 16rpx;">
					<view>性別</view>
					<view>
						<u-image
							src="/static/images/icon/down-icon.png"
							width="28rpx"
							height="28rpx"
						></u-image>
					</view>
				</view>
				<view @click="showTimeFn" style="display: flex;justify-content: flex-end;align-items: center;border: 2rpx solid #E5E6E8;padding: 12rpx 24rpx;border-radius: 16rpx;margin-left: 16rpx;">
					<view>發佈時間</view>
					<view>
						<u-image
							src="/static/images/icon/down-icon.png"
							width="28rpx"
							height="28rpx"
						></u-image>
					</view>
				</view>
			</view>
		</view>
		<view v-if="list_active.length > 0 && !showRes" style="margin-top: 50rpx; padding:0 36rpx;border-bottom: 2rpx solid #F0F0F0;">
			<view style="display: flex;justify-content: space-between;align-items: center;">
				<view style="display: flex;justify-content: flex-start;align-items: flex-end;">
					<view style="color: #232426;font-size: 32rpx;font-weight: 500;">歷史搜尋</view>
				</view>
				<view @click="cleanList">
					<u-image
						src="/static/images/icon/trash.png"
						width="40rpx"
						height="40rpx"
					></u-image>
				</view>
			</view>
			
			<view class="filter-list">
				<view class="item-active" v-for="(item, index) in list_active" :key="index" @click="removeList(item.id)">
					 {{item.title}}
				</view>
				<view v-if="showOpen" @click="openHistory" style="border: 2rpx solid #F0F0F0;display: flex;justify-content: center;align-items: center;border-radius: 8rpx;width: 60rpx;height: 60rpx;">
					<u-image
						src="/static/images/icon/down-icon.png"
						width="30rpx"
						height="20rpx"
					></u-image>
				</view>
			</view>
		</view>
		<view v-if="!showRes" style="margin-top: 40rpx; padding:0 36rpx;border-bottom: 2rpx solid #F0F0F0;">
			<view style="display: flex;justify-content: space-between;align-items: center;">
				<view style="display: flex;justify-content: flex-start;align-items: center;">
					<view style="color: #232426;font-size: 32rpx;font-weight: 500;">猜您想搜</view>
					<view style="margin-left: 16rpx;">
						<u-image
							src="/static/images/icon/refresh.png"
							width="40rpx"
							height="40rpx"
						></u-image>
					</view>
				</view>
				<view>
					<u-image
						src="/static/images/icon/right-icon.png"
						width="40rpx"
						height="40rpx"
					></u-image>
				</view>
			</view>
			
			<view class="filter-list">
				<view class="item-active" v-for="(item, index) in listData" :key="index" @click="removeList(item.id)">
					 {{item.title}}
				</view>
			</view>
		</view>
		<view v-if="!showRes" style="margin-top: 40rpx; padding:0 36rpx;border-bottom: 20rpx solid #F0F0F0;">
			<view style="display: flex;justify-content: space-between;align-items: center;">
				<view style="display: flex;justify-content: flex-start;align-items: center;">
					<view style="color: #232426;font-size: 32rpx;font-weight: 500;">熱門之星🔥</view>
				</view>
				<view>
					<u-image
						src="/static/images/icon/right-icon.png"
						width="40rpx"
						height="40rpx"
					></u-image>
				</view>
			</view>
			
			<view style="display:flex; overflow-x: auto; padding: 24rpx;width: 90%;gap: 48rpx;">
				<view v-for="(item, index) in userList" :key="index"  style="flex-shrink: 0;">
					<view style="position: relative;display: inline-block;">
						<u-image
							:src="item.avatar"
							width="116rpx"
							height="116rpx"
							radius="50%"
						></u-image>
					</view>
					<view style="color: #232426;font-size: 24rpx;text-align: center;">{{item.nickname}}</view>
					<view style="color: #808690;font-size: 22rpx;text-align: center;">{{item.fans}}人追蹤</view>
				</view>
			</view>
		</view>
		<!--吸頂導航-->
		<view v-if="showNav" style="position: fixed;top: 0;z-index: 99;background: #fff;padding-bottom: 15rpx;box-sizing: border-box;width: 100%;padding-top: constant(safe-area-inset-top);padding-top: env(safe-area-inset-top);">
			<view style="width: 100%;display: flex;justify-content: space-between;align-items: center;padding: 0 36rpx 0 16rpx;box-sizing: border-box;">
				<view style="display: flex;justify-content: flex-start;align-items: center;">
					<view style="box-sizing: border-box;" @click="goBack">
						<view style="border: 2rpx solid #E5E6E8;border-radius: 24rpx;">
							<image style="width: 36rpx;height: 36rpx;margin: 16rpx 16rpx 4rpx;" src="/static/images/icon/left-icon.png"></image>
						</view>
					</view>
					<view style="margin-left: 32rpx;">
						<u-input
							placeholder="輕斷食8小時菜單"
							prefixIcon="search"
							prefixIconStyle="font-size: 40rpx;color: #909399"
							shape="circle"
							style="background-color: #fff;padding: 6rpx 18rpx;"
							v-model="keyword"
						></u-input>
					</view>
				</view>
				<view style="color: #232426;font-size: 32rpx;font-weight:400;" @click="search">
					搜尋
				</view>
			</view>
			<view v-if="showRes" style="display: flex;justify-content: space-between;align-items: center;width: 100%;box-sizing: border-box;padding: 0 32rpx;margin-top: 24rpx;">
				<view style="letter-spacing: 8rpx;">共{{num}}筆</view>
				<view style="display: flex;justify-content: flex-end;align-items: center;">
					<view @click="showArea=true" style="display: flex;justify-content: flex-end;align-items: center;border: 2rpx solid #E5E6E8;padding: 12rpx 24rpx;border-radius: 16rpx;margin-left: 16rpx;">
						<view>地區</view>
						<view>
							<u-image
								src="/static/images/icon/down-icon.png"
								width="28rpx"
								height="28rpx"
							></u-image>
						</view>
					</view>
					<view @click="showSex=true" style="display: flex;justify-content: flex-end;align-items: center;border: 2rpx solid #E5E6E8;padding: 12rpx 24rpx;border-radius: 16rpx;margin-left: 16rpx;">
						<view>性別</view>
						<view>
							<u-image
								src="/static/images/icon/down-icon.png"
								width="28rpx"
								height="28rpx"
							></u-image>
						</view>
					</view>
					<view @click="showTimeFn" style="display: flex;justify-content: flex-end;align-items: center;border: 2rpx solid #E5E6E8;padding: 12rpx 24rpx;border-radius: 16rpx;margin-left: 16rpx;">
						<view>發佈時間</view>
						<view>
							<u-image
								src="/static/images/icon/down-icon.png"
								width="28rpx"
								height="28rpx"
							></u-image>
						</view>
					</view>
				</view>
			</view>
			<view style="display: flex; justify-content: space-between;padding:32rpx 36rpx 0;">
				<view>
					<view :class="{'type-item-active':type==1,'type-item':type!=1}" @click="changeType(1)">
						熱門貼文
					</view>
				</view>
				<view>
					<view :class="{'type-item-active':type==2,'type-item':type!=2}" @click="changeType(2)">
						熱門達人
					</view>
				</view>
				<view>
					<view :class="{'type-item-active':type==3,'type-item':type!=3}" @click="changeType(3)">
						熱門任務
					</view>
				</view>
				<view>
					<view :class="{'type-item-active':type==4,'type-item':type!=4}" @click="changeType(4)">
						熱門標籤
					</view>
				</view>
			</view>
		</view>
		<!--吸頂導航結束-->
		<view style="padding:32rpx 36rpx 0;border-bottom: 2rpx solid #F0F0F0;">
			<view style="display: flex; justify-content: space-between;">
				<view>
					<view :class="{'type-item-active':type==1,'type-item':type!=1}" @click="changeType(1)">
						熱門貼文
					</view>
				</view>
				<view>
					<view :class="{'type-item-active':type==2,'type-item':type!=2}" @click="changeType(2)">
						熱門達人
					</view>
				</view>
				<view>
					<view :class="{'type-item-active':type==3,'type-item':type!=3}" @click="changeType(3)">
						熱門任務
					</view>
				</view>
				<view>
					<view :class="{'type-item-active':type==4,'type-item':type!=4}" @click="changeType(4)">
						熱門標籤
					</view>
				</view>
			</view>
			
			
			<view style="margin-top: 40rpx;" v-if="type!=4">
				<card-list :listData="data_list" type="4"></card-list>
			</view>
			<view style="margin-top: 40rpx;padding: 0 24rpx" v-else>
				<view style="border-bottom: 2rpx solid #F6F8FA;padding: 32rpx 0;" v-for="(item, index) in data_list" :key="index">
					<view style="display: flex;justify-content: space-between;align-items: center;">
						<view style="display: flex;justify-content: space-between;align-items: center;">
							<u-image
								src="/static/images/icon/topic.png"
								width="84rpx"
								height="84rpx"
							></u-image>
							<view style="margin-left: 20rpx;">
								<view style="color: #232426;font-size: 28rpx;">{{item.title}}</view>
								<view style="color: #BEC0C5;font-size: 20rpx;">{{item.focus}}人在追蹤</view>
							</view>
						</view>
						<view v-if="item.is_focus == 1" @click="focusTagsFn(item.id)" style="background-color: #FFF;color: #7A7B7E;padding:6rpx 24rpx;border-radius: 32rpx;border: 2rpx solid #E5E6E8;font-size: 28rpx;">
							已追蹤
						</view>
						<view v-else @click="focusTagsFn(item.id)" style="background-color: #FFF;color: #7A7B7E;padding:6rpx 24rpx;border-radius: 32rpx;border: 2rpx solid #E5E6E8;font-size: 28rpx;">
							追蹤
						</view>
						<!-- <view style="background-color: #F6F8FA;color: #7A7B7E;padding:6rpx 24rpx;border-radius: 32rpx;border: 2rpx solid #E5E6E8;font-size: 28rpx;">
							{{$t('my.tipsNoticeIsAttention')}}
						</view> -->
					</view>
					<view>
						<view style="display:flex; overflow-x: auto; padding: 24rpx;width: 100%;gap: 48rpx;">
							<view v-for="(item_, index_) in item.list" :key="index_"  style="flex-shrink: 0;">
								<view style="position: relative;display: inline-block;" @click="goCmsDetail(item_.id)">
									<u-image
										:src="item_.cover"
										width="200rpx"
										height="200rpx"
										radius="14rpx"
									></u-image>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			
		</view>
		
		
		
		<custom-toast ref="toast" :title="toastMessage" image="/static/images/icon/success-circle.png" position="center" />
		<u-modal :show="showModal" title="添加失敗"  confirmText="確認" confirmColor="#27C5D6" width="500rpx" @confirm="showModal=false">
			<view class="u-flex u-row-center u-col-center"> 
			    <text>{{toastMessage}}</text>
			  </view>
		</u-modal>
		
		<u-picker 
			:show="showArea" 
			:columns="areaColumns"
			@confirm="closeArea"
			@close="closeArea"
		></u-picker>
		<u-picker 
			:show="showSex" 
			:columns="sexColumns"
			@confirm="closeArea"
			@close="closeArea"
		></u-picker>
		<card-popup 
			ref="cardPopup" 
			:listData="listData" 
			@checkItem="handleData" 
		/>
	</view>
</template>

<script>
	import cardList from '@/components/card-list.vue'
	import cardPopup from '@/components/card-popup.vue';
	import { searchIndex, userRecom, tagsRecom, focusToTags } from '@/config/api.js';
	
	export default {
		data() {
			return {
				keyword:'',
				type:1,
				maxCount:-1,
				toastMessage:'',
				showModal:false,
				list_active:[],
				listData:[
					{
						id:1,
						title:'睫毛嫁接🔥'
					}
				],
				data_list:[],
				showOpen:false,
				userList:[],
				topicTags:[],
				channel_id:3,
				showNav:false,
				scrollTop:0,
				hideThreshold:450,
				showRes:false,
				num:0,
				showArea:false,
				showSex:false,
				showTime:false,
				areaColumns:[
                    ['臺北市', '新北市'],
                    ['中正區', '信義區', '大安區', '士林區']],
				sexColumns:[
					['不限','男生','女生']
				],
				listData:[{
					id:3,
					title:'近一個月',
				},{
					id:1,
					title:'近三個月',
				},{
					id:2,
					title:'近一年',
				},{
					id:0,
					title:'全部',
				}],
			}
		},
		components: {
			cardList,cardPopup
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
			console.log(this.scrollTop)
			if(this.scrollTop > this.hideThreshold){
				this.showNav = true;
			} else {
				this.showNav = false;
			}
		},
		onLoad(option) {
			this.getIndexFn()
			this.getSearchUserFn()
			this.getHistory()
		},
		methods: {
			goBack(){
				uni.navigateBack();
			},
			openHistory(){
				this.list_active.push({
						id:5,
						title:'運動'
					},
					{
						id:5,
						title:'寵物'
					});
				this.showOpen = false;
			},
			getHistory(){
				let that = this;
				uni.getStorage({
					key: 'search_keyword',
					success: function (res) {
						console.log(res.data);
						that.list_active = res.data;
					}
				});
			},
			cleanList(){
				this.list_active = [];
				uni.removeStorage({
					key: 'search_keyword',
					success: function (res) {
						console.log('removeStorage success');
					}
				});
				this.showOpen = false;
			},
			getIndexFn(){
				let that = this;
				uni.showLoading({
					title:'請求中..'
				})
				let parames = {
					type:this.type,
					page:1,
					limit:10,
					keyword:this.keyword
				}
				searchIndex(parames).then((res) => {
					//success
					console.log(res.data)
					this.data_list = res.data
					uni.hideLoading();
				}).catch(() =>{
					uni.hideLoading();
				})
			},
			getSearchUserFn(){
				let that = this;
				let parames = {
					data:{
						page:that.pages,
						limit:that.limit,
						keyword:this.keyword
					}
				}
				userRecom(parames).then((res) => {
					//success
					console.log(res.data)
					this.userList = res.data
				}).catch(() =>{
					
				})
			},
			getSearchTagFn(){
				let that = this;
				let parames = {
					data:{
						page:that.pages,
						limit:that.limit,
						keyword:this.keyword
					}
				}
				tagsRecom(parames).then((res) => {
					//success
					console.log(res.data)
					this.topicTags = res.data
				}).catch(() =>{
					
				})
			},
			changeType(type){
				this.type = type;
				this.getIndexFn()
			},
			//搜索
			search(){
				//保存歷史記錄
				this.list_active.push({
					id:1,
					title:this.keyword
				}); 
				uni.setStorage({
					key: 'search_keyword',
					data: this.list_active,
					success: function () {
						console.log('success');
					}
				});
				//
				this.getIndexFn();
				this.showRes = true;
				this.hideThreshold = 100;
			},
			showTimeFn(){
				this.$refs.cardPopup.show();
			},
			closeArea(){
				this.showArea = false;
				this.showSex = false;
			},
			handleData(){
				this.$refs.cardPopup.close();
			},
			goCmsDetail(id){
				uni.navigateTo({
					url: '/pages/content/expert?id='+id
				});
			},
			//追蹤話題
			focusTagsFn(id){
				let that = this;
				uni.showLoading({
					title:'請求中'
				})
				let parames = {
					id:id
				}
				focusToTags(parames).then((res) => {
					//success
					console.log(res)
					uni.showToast({
						icon:'none',
						title:'操作成功'
					})
					setTimeout(()=>{
						that.getIndexFn();
					},1500)
				}).catch(() =>{
					
				})
				
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		width: 100%;
		
		.filter-list{
			margin-top: 50rpx;
			display: flex;
			flex-wrap: wrap;
			// justify-content: space-around;
			
			.item-active{
				font-size: 28rpx;
				color: #808690;
				border-radius: 8rpx;
				padding: 12rpx 26rpx;
				margin-bottom: 24rpx;
				margin-right: 20rpx;
				display: flex;
				justify-content: center;
				background-color: #F6F8FA;
			}
			
			.item{
				font-size: 28rpx;
				color: #232426;
				border: 2rpx solid #E5E6E8;
				border-radius: 200rpx;
				padding: 12rpx 26rpx;
				margin-bottom: 24rpx;
				margin-right: 20rpx;
			}
		}
		.type-item{
			color: #808690;
			font-size: 28rpx;
			line-height: 140%; /* 19.6px */
			letter-spacing: 0.28rpx;
			margin: 8rpx 24rpx;
			padding-bottom: 8rpx;
		}
		.type-item-active{
			color: #1AAEC0;
			font-size: 28rpx;
			line-height: 140%; /* 19.6px */
			letter-spacing: 0.28rpx;
			border-bottom: 4rpx solid #1AAEC0;
			font-weight: 600;
			margin: 8rpx 24rpx;
			padding-bottom: 8rpx;
		}
	}
	
</style>
